<template>
  <div id="AddAccount">
    <div class="content">
      <div class="overflow-auto ">
        <div class="menu">
          <Menu></Menu>
        </div>

        <div class="body">
          <div class="title">基本信息</div>
          <div class="BasicInfo">
            <div class="phone">
              <span>账号</span>
              <span>
                <div class="in">中国+86</div>
                <el-input v-model="phone"></el-input>
              </span>
              <span class="annotation">员工可通过该账号登录订单来了后台，密码可自行设置</span>
            </div>
            <div class="password">
              <span>密码</span>
              <span>
                <el-input v-model="password"></el-input>
              </span>
            </div>

            <div class="name">
              <span>姓名</span>
              <span>
                <el-input v-model="password"></el-input>
              </span>
            </div>
          </div>
          <div class="AuthorityManagement">
            <div class="title">
              <span>权限设置</span>
              <span>
                <el-button>取消</el-button>
                <el-button type="primary">保存</el-button>
              </span>
            </div>
            <div class="tab">
              <el-tabs type="border-card">
                <el-tab-pane label="住宿管理">
                  <div>
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                      @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>

                  </div>
                  <div class="checkbox">
                    <div class="checkbox_title" style="margin-left:20px">
                      <el-checkbox :indeterminate="isIndeterminate_room" v-model="checkRoomAll"
                        @change="handleCheckAllRoomChange">房态管理</el-checkbox>
                    </div>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group style="margin-left:40px" v-model="checkedRoom" @change="handleCheckedRoomChange">
                      <el-checkbox v-for="room in roomArr" :label="room" :key="room">{{ room }}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <!-- 房价管理 -->
                  <div class="checkbox">
                    <div class="checkbox_title" style="margin-left:20px">
                      <el-checkbox :indeterminate="isIndeterminate_price" v-model="checkPrice"
                        @change="handleCheckAllPriceChange">房价管理</el-checkbox>
                    </div>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group style="margin-left:40px" v-model="checkedPrice" @change="handleCheckedPriceChange">
                      <el-checkbox v-for="price in priceArr" :label="price" :key="price">{{ price }}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <!-- 订单管理 -->
                  <div class="checkbox">
                    <div class="checkbox_title" style="margin-left:20px">
                      <el-checkbox :indeterminate="isIndeterminate_orderFrom" v-model="checkOrderForm"
                        @change="handleCheckAllOrderFormChange">订单管理</el-checkbox>
                    </div>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group style="margin-left:40px" v-model="checkedOrderFrom"
                      @change="handleCheckedOrderFormChange">
                      <el-checkbox v-for="price in orderFromArr" :label="price" :key="price">{{ price }}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <!-- 住宿管理 -->
                  <div class="checkbox">
                    <div class="checkbox_title" style="margin-left:20px">
                      <el-checkbox :indeterminate="isIndeterminate_PutUp" v-model="checkputUp"
                        @change="handleCheckAllPutUpChange">住宿管理</el-checkbox>
                    </div>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group style="margin-left:40px" v-model="checkedputUp" @change="handleCheckedPutUpChange">
                      <el-checkbox v-for="price in putUpArr" :label="price" :key="price">{{ price }}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="客户">配置管理</el-tab-pane>
                <el-tab-pane label="统计">角色管理</el-tab-pane>
                <el-tab-pane label="其他设置">定时任务补偿</el-tab-pane>
                <el-tab-pane label="敏感权限">定时任务补偿</el-tab-pane>
              </el-tabs>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</template>

<script>
import Menu from '../../components/Menu'
const roomOptions = ['查看房态', '修改房态', '查看房态操作日志', '查看房情表'];
const priceOptions = ['查看房价', '修改房价', '查看改价纪律', '批量改价', '导出改价记录数据'];
const orderFromOptions = ['查看住宿订单', '导出住宿订单数据', '录入住宿订单', '修改住宿订单', '办理入住与退房', '取消预定', '撤销入住', '撤销退房', '恢复预定', '收款与退款', '住宿接单与拒单', '查看订单消息', '住宿订单打印'];
const putUpOptions = ['房型房间设置', '房间分组设置', '排序设置', '消费项设置', '钟点房设置']
export default {
  name: 'AddAccount',
  components: {
    Menu
  },
  data() {
    return {
      checkAll_room: false,
      checkAll: false,
      checkAll_price: false,
      checkRoomAll: true,
      checkAll_orderFrom: false,
      checkAll_PutUp: false,
      checkPrice: false,
      checkOrderForm: false,
      checkputUp: false,
      roomArr: roomOptions,
      checkedRoom: ['查看房态', '修改房态'],
      priceArr: priceOptions,
      checkedPrice: ['查看房价', '修改房价'],
      orderFromArr: orderFromOptions,
      checkedOrderFrom: ['住宿订单打印', '恢复预定'],
      putUpArr: putUpOptions,
      checkedputUp: ['房型房间设置', '排序设置'],

      isIndeterminate_room: true,
      isIndeterminate_price: false,
      isIndeterminate_orderFrom: false,
      isIndeterminate_PutUp: false,

      isIndeterminate: false,

      phone: '',
      password: '',
    }
  },
  methods: {
    //房态管理复选框
    handleCheckAllRoomChange(val) {
      this.checkedRoom = val ? roomOptions : [];
      this.isIndeterminate_room = false;
    },
    handleCheckedRoomChange(value) {
      let checkedCount = value.length;
      this.checkAll_room = checkedCount === this.roomArr.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.roomArr.length;
    },
    // 房价管理
    handleCheckAllPriceChange(val) {
      this.checkedPrice = val ? priceOptions : [];
      this.isIndeterminate_price = false;
    },
    handleCheckedPriceChange(value) {
      let checkedCount = value.length;
      this.checkAll_price = checkedCount === this.priceArr.length;
      this.isIndeterminate_price = checkedCount > 0 && checkedCount < this.roomArr.length;
    },
    // 订单管理
    handleCheckAllOrderFormChange(val) {
      this.checkedOrderFrom = val ? orderFromOptions : [];
      this.isIndeterminate_orderFrom = false;
    },
    handleCheckedOrderFormChange(value) {
      let checkedCount = value.length;
      this.checkAll_orderFrom = checkedCount === this.orderFromArr.length;
      this.isIndeterminate_orderFrom = checkedCount > 0 && checkedCount < this.roomArr.length;
    },
    //  住宿管理
    handleCheckAllPutUpChange(val) {
      this.checkedputUp = val ? putUpOptions : [];
      this.isIndeterminate_PutUp = false;
    },
    handleCheckedPutUpChange(value) {
      let checkedCount = value.length;
      this.checkAll_PutUp = checkedCount === this.putUpArr.length;
      this.isIndeterminate_PutUp = checkedCount > 0 && checkedCount < this.roomArr.length;
    },
    // 全选
    handleCheckAllChange(val) {
      if (val == false) {
        this.checkputUp = false
        this.checkRoomAll = false
        this.checkPrice = false
        this.checkOrderForm = false
        this.handleCheckAllPutUpChange(val)
        this.handleCheckAllOrderFormChange(val)
        this.handleCheckAllPriceChange(val)
        this.handleCheckAllRoomChange(val)
        this
      } else {
        this.checkputUp = true
        this.checkRoomAll = true
        this.checkPrice = true
        this.checkOrderForm = true
        this.handleCheckAllPutUpChange(val)
        this.handleCheckAllOrderFormChange(val)
        this.handleCheckAllPriceChange(val)
        this.handleCheckAllRoomChange(val)
      }

    }
  }
}
</script>

<style lang="scss" scoped>
:v-deep .el-menu-item .is-active {
  border-left: 6px solid !important;
  border-left-color: #0486fe !important;
  background-color: #f6f8ff;
}

::v-deep .content {
  .overflow-auto {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: auto;
    position: absolute;

    .menu {
      // height: 1030px;
      width: 180px;
    }

    .body {
      padding: 15px 30px;
      width: 100%;

      .title {
        margin-top: 50px;
      }

      .BasicInfo {
        margin-left: 50px;

        .phone {
          .annotation {
            position: absolute;
            left: 50px;
            color: #909399;
            top: 40px;
            font-size: 12px;
          }

          position: relative;
          display: inline-block;
          margin-top: 30px;

          .in {
            position: absolute;
            z-index: 20;
            line-height: 36px;
            margin-left: 20px;
            font-size: 12px;
          }

          .el-input {
            margin-left: 10px;
            width: 323px;

            .el-input__inner {
              padding-left: 90px;
            }
          }

          span {
            display: inline-block;
          }
        }

        .password {
          margin-left: 20px;
          display: inline-block;

          span {
            display: inline-block;
          }

          .el-input {
            margin-left: 10px;
            width: 323px;
          }
        }

        .name {
          margin-top: 50px;

          span {
            display: inline-block;
          }

          .el-input {
            margin-left: 10px;
            width: 323px;
          }
        }
      }

      .AuthorityManagement {
        .el-checkbox-group {
          margin-bottom: 20px;
        }

        .title {
          margin-top: 50px;
          display: flex;
          justify-content: space-between;
        }

        .tab {

          // width: 1300px;
          .checkbox_title {
            width: 100%;
            background-color: #fafbfe;
            height: 48px;
            line-height: 48px;
          }

          .el-tabs {
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>